<style type="text/css">

    .dropable-active {
        
    }
    
    .dropable-hover {
        
    }
    
    #droppable {
        background-image: url('/pldkp/gfx/site/fade_bg.png');
        height: 100px;
    }
    
    div.character {
        background-image: url('/pldkp/gfx/site/fade_bg.png');
        padding: 5px;
        margin-bottom: 5px;
    }
    
</style>

<script type="text/javascript">
$(function() {
    
    $("#character1, #character2, #character3").draggable({
        revert: true,
        containment: '#page-center'
    });

    $("#droppable").droppable({
        activeClass: 'dropable-active',
        hoverClass: 'dropable-hover',
        drop: function(event, ui) {
            alert('character: ' + ui.draggable.attr('character-id'));
        }
    });

});
</script>


<div id="constraint-wrapper">

    <div class="content-left">
        
        <h1>Characters</h1>
        
        <div id="character1" class="frame-input" character-id="1">
            <div class="character">
                <h2><?= $this->img('gfx/icon/class/18x18/rouge.png') ?> Mr. Rouge</h2>
                <p>Hest</p>
            </div>
        </div>
        
        <div id="character2" class="character frame-input" character-id="2">
            <div class="character">
                <h2><?= $this->img('gfx/icon/class/18x18/mage.png') ?> Dr. Magic</h2>
                <p>Hest2</p>
            </div>
        </div>
        
        <div id="character3" class="character frame-input" character-id="3">
            <div class="character">
                <h2><?= $this->img('gfx/icon/class/18x18/priest.png') ?> Icanhealyou</h2>
                <p>Hest3</p>
            </div>
        </div>
            
    </div>
    
    <div class="content-right">
    
        <h1>Your signup</h1>
        
        <div id="droppable">
            
        </div>
            
    </div>
    
</div>